<template>
  <div>
    <a-row>
      <a-col :span="24" style="margin-bottom: 10px" v-if="showSearch">
        <a-select show-search :value="keyword" placeholder="请输入搜索地址信息" style="width: 100%" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" @search="searchAddress" @change="handleChange">
          <a-select-option v-for="(value, index) in suggestionList" :key="index">
            {{ value.address }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="24">
        <div id="map" :style="{ width: width, height: height }"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import TMap from '@/utils/initMap'
export default {
  props: {
    ipFlag: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    mapSetting: {
      type: Object,
      default() {
        return {
          name: undefined,
          longitude: undefined,
          latitude: undefined,
          range: undefined,
          scale: undefined,
          longitudinalOffset: undefined,
          lateralOffset: undefined,
          padding: undefined,
          display: undefined
        }
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    TXMap: {
      handler(newValue, oldValue) {
        if (this.mapSetting.latitude && !this.tMap) {
          this.mapData = this.mapSetting
          const name = this.mapSetting.name
          const location = new this.TXMap.LatLng(this.mapSetting.latitude, this.mapSetting.longitude)
          this.init(name, location)
        }
      }
    },
    mapSetting: {
      handler(newValue, oldValue) {
        if (this.TXMap) {
          if (this.mapSetting.latitude && !this.tMap) {
            this.mapData = this.mapSetting
            const name = this.mapSetting.name
            const location = new this.TXMap.LatLng(this.mapSetting.latitude, this.mapSetting.longitude)
            this.init(name, location)
          }
        }
      }
    },
    'mapSetting.scale': {
      handler(newValue, oldValue) {
        if (oldValue) {
          if (newValue && oldValue !== newValue) {
            this.tMap.setZoom(newValue)
          }
        }
      }
    },
    'mapSetting.longitudinalOffset': {
      handler(newValue, oldValue) {
        if (oldValue) {
          if (newValue && oldValue !== newValue) {
            const location = new this.TXMap.LatLng(this.mapSetting.latitude, this.mapSetting.longitude)
            this.setInfoWindow(this.mapSetting.name, location)
            this.openInfoWindow()
          }
        }
      }
    },
    'mapSetting.lateralOffset': {
      handler(newValue, oldValue) {
        if (oldValue) {
          if (newValue && oldValue !== newValue) {
            const location = new this.TXMap.LatLng(this.mapSetting.latitude, this.mapSetting.longitude)
            this.setInfoWindow(this.mapSetting.name, location)
            this.openInfoWindow()
          }
        }
      }
    },
    'mapSetting.padding': {
      handler(newValue, oldValue) {
        if (oldValue) {
          if (newValue && oldValue !== newValue) {
            const location = new this.TXMap.LatLng(this.mapSetting.latitude, this.mapSetting.longitude)
            this.setInfoWindow(this.mapSetting.name, location)
            this.openInfoWindow()
          }
        }
      }
    },
    'mapSetting.name': {
      handler(newValue, oldValue) {
        if (oldValue) {
          if (newValue && oldValue !== newValue) {
            const location = new this.TXMap.LatLng(this.mapSetting.latitude, this.mapSetting.longitude)
            this.setInfoWindow(newValue, location)
            this.openInfoWindow()
          }
        }
      }
    },
    'mapSetting.range': {
      handler(newValue, oldValue) {
        if (oldValue) {
          if (newValue && oldValue !== newValue) {
            this.setCircle(new this.TXMap.LatLng(this.mapSetting.latitude, this.mapSetting.longitude))
          }
        }
      }
    }
  },
  data() {
    return {
      open: true,
      keyword: '', // 搜索关键词
      suggestionList: [], //搜索数组
      suggest: undefined, //关键字输入提示类
      ipLocation: undefined, //IP定位类
      infoWindow: undefined, // 信息窗口实例
      circle: undefined, //圆形
      markers: [], // 标记数据
      centerPoint: {
        latitude: '24.467581',
        longitude: '118.115937'
      },
      tMap: undefined, // 腾讯地图实例
      TXMap: undefined, // 腾讯地图原型
      mapData: this.mapSetting
    }
  },
  mounted() {
    this.initiateMap()
  },
  created() {},
  methods: {
    transferValue() {
      this.$emit('change', this.mapData)
    },
    //选择地址
    handleChange(value, { key }) {
      this.keyword = value
      const title = this.suggestionList[key].title
      const location = this.suggestionList[key].location
      this.setMarkers('main', location)
      this.setInfoWindow(title, location)
      this.tMap.setCenter(location)
      this.setCircle(location)
      this.setMapData(title, location)
    },
    //搜索地址
    searchAddress(value) {
      this.keyword = value
      if (this.keyword) {
        this.suggest.getSuggestions({ keyword: this.keyword, location: this.tMap.getCenter() }).then(response => {
          this.suggestionList = response.data
        })
      }
    },
    initiateMap() {
      TMap.init().then(TMap => {
        this.TXMap = TMap
        if (this.ipFlag) {
          this.initIpLocation()
        }
        if (this.showSearch) {
          this.initSuggest()
        }
      })
    },
    setMapData(name, location) {
      this.mapData.name = name
      this.mapData.latitude = location.lat
      this.mapData.longitude = location.lng
    },
    //设置地图
    initTmap() {
      this.tMap = new this.TXMap.Map('map', {
        center: new this.TXMap.LatLng(this.centerPoint.latitude, this.centerPoint.longitude), //设置地图中心点坐标
        zoom: this.mapData.scale, //设置地图缩放级别
        viewMode: '2D',
        minZoom: this.disabled === false ? 3 : this.mapData.scale,
        maxZoom: this.disabled === false ? 20 : this.mapData.scale
      })
      if (!this.disabled) {
        this.tMap.on('click', evt => {
          const name = evt.poi !== null ? evt.poi.name : ''
          this.setInfoWindow(name, evt.latLng)
          this.setMapData(name, evt.latLng)
          this.setMarkers('main', evt.latLng)
          this.setCircle(evt.latLng)
        })
      }
    },
    // 设置信息窗口
    setInfoWindow(title, location) {
      this.infoWindow.setPosition(location)
      this.infoWindow.setContent(`<h3 style='padding:${this.mapData.padding}px'>名称:${title}</h3>`)
      this.infoWindow.setOffset({ x: this.mapData.lateralOffset, y: -this.mapData.longitudinalOffset })
    },
    // 将所得位置绘制在地图上
    setMarkers(id, position) {
      this.markers.setGeometries([])
      this.markers.updateGeometries([
        {
          id: id,
          position: position
        }
      ])
      this.openInfoWindow()
      this.markers.on('click', e => {
        this.openInfoWindow()
      })
    },
    setCircle(position) {
      this.circle.setMap(null)
      this.circle = null
      this.initCircle(position)
    },
    initSuggest() {
      this.suggest = new this.TXMap.service.Suggestion({
        // 新建一个关键字输入提示类
        pageSize: 10 // 返回结果每页条目数
      })
    },
    initIpLocation() {
      this.ipLocation = new this.TXMap.service.IPLocation()
      this.ipLocation.locate().then(response => {
        const name = response.result.ad_info.nation + response.result.ad_info.province + response.result.ad_info.city + response.result.ad_info.district
        const location = response.result.location
        this.initMapData(name, location)
        this.init(name, location)
      })
    },
    init(name, location) {
      this.centerPoint.latitude = location.lat
      this.centerPoint.longitude = location.lng
      this.initTmap()
      this.initMarkers()
      this.initInfoWindow(name, location)
      this.setMarkers('main', location)
      this.initCircle(location)
    },

    initMapData(name, location) {
      if (this.mapData.range === undefined) {
        this.mapData.range = 400
      }
      if (this.mapData.scale === undefined) {
        this.mapData.scale = 15
      }
      if (this.mapData.lateralOffset === undefined) {
        this.mapData.lateralOffset = 0
      }
      if (this.mapData.longitudinalOffset === undefined) {
        this.mapData.longitudinalOffset = 50
      }
      if (this.mapData.padding === undefined) {
        this.mapData.padding = 0
      }
      this.setMapData(name, location)
    },
    initCircle(position) {
      this.circle = new this.TXMap.MultiCircle({
        map: this.tMap,
        styles: {
          // 设置圆形样式
          circle: new this.TXMap.CircleStyle({
            color: 'rgba(41,91,255,0.16)',
            showBorder: true,
            borderColor: 'rgba(41,91,255,1)',
            borderWidth: 2
          })
        },
        geometries: [
          {
            styleId: 'circle',
            center: position,
            radius: this.mapData.range
          }
        ]
      })
    },
    initMarkers() {
      this.markers = new this.TXMap.MultiMarker({
        map: this.tMap,
        geometries: []
      })
    },
    initInfoWindow(title, location) {
      this.infoWindow = new this.TXMap.InfoWindow({
        map: this.tMap,
        position: location,
        content: `<h3 style='padding:${this.mapData.padding}px'>名称:${title}</h3>`,
        offset: { x: this.mapData.lateralOffset, y: -this.mapData.longitudinalOffset }
      })
    },
    // 关闭信息窗口
    closeInfoWindow() {
      if (this.infoWindow) {
        this.infoWindow.close()
      }
    },
    // 打开信息窗口
    openInfoWindow() {
      if (this.infoWindow) {
        this.infoWindow.open()
      }
    },
    cancel(e) {
      this.open = false
    }
  },
  model: { prop: 'mapSetting', event: 'change' }
}
</script>

<style></style>
